<template>
  <!-- 外协介绍页 -->
  <div :class="['Introduce', { modile: $isMobile }]">
    <div class="g-con">
      <div class="top">{{ t('header.menu1_m3') }}</div>

      <Banner bannerModel="3" />

      <div class="module mt-5">
        <div class="g-title flexsb">
          <div class="text flexsc">{{ t('externalAssistanceIntroduce.t1') }}</div>
          <div v-if="!$isMobile">
            <el-button
              type="primary"
              @click="enter"
            >
              {{ t('clickIn') }}
            </el-button>
          </div>
        </div>
        <div class="con">
          <img
            src="@/assets/img/ep1-zh.png"
            alt=""
            v-if="locale === 'zh-CN'"
          />
          <img
            src="@/assets/img/ep1-en.png"
            alt=""
            v-if="locale === 'en'"
          />
        </div>
      </div>

      <!--  -->
      <div class="module-2 mt-5">
        <div class="g-title flexsb">
          <div class="text flexsc">{{ t('externalAssistanceIntroduce.t2') }}</div>
        </div>
        <div class="con">
          <img
            src="@/assets/img/ep2-zh.png"
            alt=""
            v-if="locale === 'zh-CN'"
          />
          <img
            src="@/assets/img/ep2-en.png"
            alt=""
            v-if="locale === 'en'"
          />
        </div>
      </div>

      <!--  -->
      <div class="module-3 mt-5">
        <div class="g-title flexsb">
          <div class="text flexsc">{{ t('externalAssistanceIntroduce.t3') }}</div>
        </div>
        <div class="con">
          <Swiper3d class="mt-9" />
        </div>
      </div>

      <!--  -->
      <div class="module-4 mt-5">
        <div class="g-title flexsb">
          <div class="text flexsc">{{ t('externalAssistanceIntroduce.t4') }}</div>
        </div>
        <div class="con mt-9">
          <div
            class="item"
            v-for="item in tgData"
          >
            <img
              :src="item.url"
              alt=""
            />
            <div
              class="text flexcc"
              v-html="t(item.text)"
            ></div>
          </div>
        </div>
      </div>

      <!--  -->
      <div class="module-5 mt-5">
        <div class="g-title flexsb">
          <div class="text flexsc">{{ t('externalAssistanceIntroduce.t5') }}</div>
        </div>
        <div class="con mt-10">
          <div
            class="item flexcc"
            v-for="item in outstandingList"
            :key="item.id"
            @click.stop="openShipyard(item)"
          >
            <img :src="item.enterpriseLogo" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, watch, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getPartnersPageListApi } from '@/service/login'
import Banner from '@/components/Banner.vue'
import Swiper3d from '@/components/Swiper3d.vue'
import useLogin from '@/stores/login'
import { openUrl } from '@/utils'

const { $isMobile } = getCurrentInstance().appContext.config.globalProperties

const router = useRouter()
const route = useRoute()

const { t, locale } = useI18n()
const storeLogin = useLogin()

onBeforeMount(() => {
  init()
})

watch(locale, (n) => {
  init()
})

const tgData = ref([
  {
    url: new URL('@/assets/img/i-tg-1.png', import.meta.url),
    text: 'introduce.tg_1'
  },
  {
    url: new URL('@/assets/img/i-tg-2.png', import.meta.url),
    text: 'introduce.tg_2'
  },
  {
    url: new URL('@/assets/img/i-tg-3.png', import.meta.url),
    text: 'introduce.tg_3'
  },
  {
    url: new URL('@/assets/img/i-tg-4.png', import.meta.url),
    text: 'introduce.tg_4'
  },
  {
    url: new URL('@/assets/img/i-tg-5.png', import.meta.url),
    text: 'introduce.tg_5'
  },
  {
    url: new URL('@/assets/img/i-tg-6.png', import.meta.url),
    text: 'introduce.tg_6'
  }
])

// 合作伙伴
const outstandingList = ref([])
const getOutstandingList = () => {
  getPartnersPageListApi(3, {
    pageNum: 1,
    pageSize: 12
  }).then(({ rows }) => {
    outstandingList.value = rows
  })
}

// 企业信息页
const openShipyard = ({ id }) => {
  openUrl(`/shipyard`, { id })
}

// 进入
const enter = () => {
  if (['05', '06'].includes(storeLogin?.userInfo?.customerClassCode)) {
    openUrl('/shipping')
  } else {
    openUrl('/personalHomepage')
  }
}

// 初始化
const init = () => {
  getOutstandingList()
}
</script>

<style scoped lang="scss">
@import '@/assets/introduce.scss';
</style>
